<template>
	<div>
		<p>{{ label }}</p>
		<Numbercom :number="number"></Numbercom>
	</div>
</template>

<script>
	import Numbercom from "./Number.vue";
	import constObj from '../unit/const.js';
	import {
		mapState
	} from 'vuex';
	let {
		i18n,
		lan
	} = constObj;
	const DF = i18n.point[lan];
	const ZDF = i18n.highestScore[lan];
	const SLDF = i18n.lastRound[lan];
	let timeout = null;
	export default {
		name: 'Point',
		components: {
			Numbercom
		},
		props: {
			cur: {
				type: Boolean
			},
			max: {
				type: Number,
				required: true
			}
		},
		data() {
			return {
				label: '',
				number: 0,
			};
		},
		computed: {
			...mapState({
				point: (state) => {
					return state.points;
				}
			}),
		},
		beforeMount() {
			this.changeHandler();
		},
		watch: {
			point(n, o) {
				this.changeHandler();
			}
		},
		methods: {
			changeHandler() {
				// console.log("分数", this.point, this.max)
				clearInterval(timeout);
				if (this.cur) { // 在游戏进行中
					this.label = this.point >= this.max ? ZDF : DF;
					this.number = this.point;
				} else { // 游戏未开始
					const toggle = () => { // 最高分与上轮得分交替出现
						this.label = SLDF;
						this.number = this.point;
						timeout = setTimeout(() => {
							this.label = ZDF;
							this.number = this.max;
							timeout = setTimeout(toggle, 3000);
						}, 3000);
					};

					if (this.point !== 0) { // 如果为上轮没玩, 也不用提示了
						toggle();
					} else {
						this.label = ZDF;
						this.number = this.max;
					}
				}
			}
		}
	}
</script>

<style scoped lang="less">

</style>
